<template>
  <div>
    <div class="header">
      <div>
        <ManyCheck class="header" v-model="yearList" @sigleChecked="sigleChecked($event)" @toggleChecked="toggleChecked($event)"></ManyCheck>
        <ManyCheck class="header" v-model="teamList" @sigleChecked="sigleChecked($event)" @toggleChecked="toggleChecked($event)"></ManyCheck>
        <ManyCheck class="header" v-model="posList" @sigleChecked="sigleChecked($event)" @toggleChecked="toggleChecked($event)"></ManyCheck>
        <!-- <CheckText v-model="configs[0]"></CheckText> -->
      </div>
      <table class="table-goods">
        <colgroup >
          <col name="col01" width="15%">
          <col name="col02" width="15%">
          <col name="col01" width="30%">
          <col name="col02" width="20%">
          <col name="col02" width="10%">
          <col name="col02" width="10%">
        </colgroup>
        <thead>
          <tr>
            <th>姓名</th>
            <th>昵称</th>
            <th>队名</th>
            <th>年月</th>
            <th>位置</th>
            <th>操作</th>
            <!-- <th>可约课时间</th> -->
          </tr>
        </thead>
        <tr v-for="(student,index) in myStudents" :key="index">
          <td >
            <span>{{student.name}}</span>
          </td>
          <td >
            <span>{{student.littleName}}</span>
          </td>
          <td >
            <span>{{student.teamName}}</span>
          </td>
          <td >
            <span>{{student.birthday}}</span>
          </td>
          <td >
            <span>{{student.postion}}</span>
          </td>
          <td >
            <span @click="toMenu(index)" class="opt" >管理</span>
          </td>
        </tr>
      </table>
    </div>
    <div>
      <input type="button" @click="addStudent" value="添加">
    </div>
  </div>
</template>

<script>
import scheduleData from '@/data/schudle'
import CheckText from '@/components/tools/checkText'
import ManyCheck from '@/components/tools/manyCheck'
// import Ppp from '@/data/ppp.js'
export default {
  name: 'Student',
  components: { CheckText, ManyCheck },
  beforeMount () {
    this.yearList = scheduleData.yearList
    this.teamList = scheduleData.teamList
    this.posList = scheduleData.posList
    console.log('mounted==yearList=============================' + this.yearList)
    this.testStr = '1212112'
  },
  mounted () {
    console.log('mounted==Main=============================' + this.typeTime)
    // var that = this
    // Ppp.$on('sendTime', function (msg) {
    //   console.log(msg)
    //   that.dealTime(msg)
    // })
    this.myStudents = scheduleData.students
  },
  methods: {
    addStudent () {
      this.$router.push({path: '/Main/student/addstudent'})
    },
    sigleChecked (index) {
      // console.log('0-0-0-0-0-0-0-0-0-0-==' + ',=' + index + '=' + this.yearList.data[index].val)
      // this.yearList.data[index].val = !this.yearList.data[index].val
    },
    toggleChecked (ev) {
      // console.log('0-0-0-0-0-0-0-0-0-0-==' + ',=' + ev)
      // for (var item of this.yearList.data) {
      //   item.val = ev
      // }
    },
    toMenu (index) {
      this.$router.push({path: '/pub/manageSchedule', query: {data: this.myStudents[index]}})
    }
  },
  data () {
    return {
      msg: 'schedule',
      configs: [true, true, false],
      yearList: [],
      teamList: [],
      posList: [],
      myStudents: [],
      testStr: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.head{
  width: 100%;
  background-color: turquoise;
}
.table-goods {
    width: 100%;
    top: 0px;
    margin-top: 15px;
    color: rgb(15, 15, 15);
    table-layout: fixed;
    /* border-collapse: collapse; */
    user-select: none;
    border: 2px solid rgba(95, 95, 121, 0.116);
    cursor: default;
  }
  .table-goods>tbody>tr {
    transition: background-color 200ms linear;
    border-top: 1px solid #ebeef5;
  }
  .table-goods>tbody>tr:hover {
    background-color: rgba(214, 119, 11, 0.1);
  }
  .table-goods td {
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    /* padding-left: 12px; */
    border: 2px solid rgba(192, 202, 189, 0.26);
    /* background-color: rgba(149, 191, 103, .1); */
    /* display: inline-block; */
  }
  .table-goods th {
    line-height: 30px;
    font-size: 12px;
    background-color: rgba(141, 103, 191, 0.1);
  }
  .time1 {
    /* width: 40%; */
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    border: 1px solid rgba(192, 202, 189, 0.26);
    /* clear: both; */
  }
  .opt {
    /* width: 40%; */
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    border: 1px solid rgba(192, 202, 189, 0.26);
    /* height: 40px; */
    /* text-align: center;
    vertical-align: middle;
    display: table-cell; */
    /* clear: both; */
  }
</style>
